<searchForm id="searchForm" th:fragment="searchForm">
    <div class="toggle active" >
        <label>Search.</label>
        <div class="toggle-content">
            <form data-example-id="input-group-with-button" class="pos-search-form" data-updater="#orderGrid">

                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group' >
                                <input type='text' class="form-control datepicker" id="search-orderId" placeholder="Order Number" />
                    <span class="input-group-addon">
                        <span class="glyphicon "></span>
                    </span>
                            </div>
                        </div>
                    </div>
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group' >
                                <select id="search-status">
                                    <option value="">ALL</option>
                                    <option th:each="color : ${T(com.chandra.pos.order.dao.entity.OrderStatus).values()}" th:value="${color}" th:text="${color.value}" ></option>
                                </select>

                            </div>
                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group date datetimepicker' id='fromDateDiv'>
                                <input type='text' class="form-control datepicker" id="fromDate" placeholder="From Date" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                            </div>
                        </div>
                    </div>

                    <div class='col-sm-6' >
                        <div class="form-group">
                            <div class='input-group date datetimepicker' id='toDateDiv'>
                                <input id="toDate" type='text' class="form-control datepicker" placeholder="To Date"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                            </div>
                        </div>
                    </div>

                </div>
                <footer>
                    <button id="search-order" class="btn btn-default order-btn"  type="button"><span aria-hidden="true" class="glyphicon glyphicon-search"></span>Search</button>

                    <button type="button" class="btn btn-default order-btn" order-type="PO" id="new-purchase-order-btn" ><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>New Purchase Order</button>

                    <button type="button" class="btn btn-default order-btn" order-type="IR" id="new-purchase-receipt-btn" ><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>Receive Items</button>

                    <button type="button" class="btn btn-default order-btn" order-type="BL" id="new-purchase-bill-btn" ><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>Enter Bill</button>


                    <button type="button" class="btn btn-default order-btn" order-type="SO" id="new-sales-order-btn"><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>New Sales Order</button>

                    <button type="button" class="btn btn-default order-btn"  order-type="IN" id="new-sales-invoice-btn"  ><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>Create Invoice </button>

                    <button type="button" class="btn btn-default order-btn"  order-type="SR" id="new-sales-receipt-btn"  ><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>Enter Sales Receipt </button>


                </footer>
            </form>
        </div>
    </div>
</searchForm>
<orderGrid id="productGrid" th:fragment="orderGrid">
    <div>
        <table id="orderGrid"></table>
        <div id="orderGridPager"></div>
    </div>
</orderGrid>
<itemReceiptBlock id="itemReceiptBlock" th:fragment="itemReceiptBlock">
    <div id="itemReceiptBlock" class="modal fade bs-large-modal-lg" keyboard="false" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Item Receipt</h4>
                </div>
                <!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">

                    <form class="ui-front" action="#" method="post" id="order-customer-info-form">
                        <input type="hidden" id="orderId" name="orderId"/>
                        <input type="hidden" name="customerId" id="customerId"/>
                        <input type="hidden" name="orderType" id="orderType"/>
                        <div class="row tabs nomargin-top">

                            <div class="col-sm-5" id="customerinfo">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Customer here.."
                                               id="search-customer"
                                               class="form-control search-customer"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </span>
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-3 " id="order-customer-info">
                                <span type="text" id="customer-companyName"/> <span
                                    class="glyphicon glyphicon-pencil order-customer-info-edit" id="order-customer-info-edit"></span><br/>
                                <span type="text" id="customer-name"/><br/>
                                <span type="text" id="customer-address"/><br/>
                                <span type="text" id="customer-mobileNumber"/>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div id="orderDateDiv" class="input-group date datetimepicker">
                                        <input type="text" placeholder="Order Date" id="orderDate" name="orderDate" th:value="${applicationDate}"
                                               class="form-control datepicker"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="row margin10">
                        <form class="ui-front " action="#" method="post">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Item here.." id="search-products"
                                               class="form-control search-products"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>

                    <div class="row margin10" id="item-receipt-items-block">
                        <table id="orderItemGrid" class="orderItemGrid"></table>
                        <div id="orderItemGridPager"></div>
                    </div>


                    <div class="row margin-top10">

                        <div class="col-md-7 col-sm-7">
                            <!-- shipping -->
                            <form class="sky-form boxed cartContent" method="post" action="#"
                                  id="order-shipping-info-form">
                                <header class="styleColor">Additional Info</header>
                                <div class="row tabs nomargin-top">
                                    <!-- tabs -->
                                    <div class="col-md-3 col-sm-3 nopadding-right">
                                        <ul class="nav nav-tabs nav-stacked">
                                            <li class="">
                                                <a data-toggle="tab" href="#tab_a" aria-expanded="false">
                                                    Note
                                                </a>
                                            </li>
                                            <li class="">
                                                <a data-toggle="tab" href="#tab_b" aria-expanded="false">
                                                    Payment Details
                                                </a>
                                            </li>
                                            <li class="active">
                                                <a data-toggle="tab" href="#tab_c" aria-expanded="true">
                                                    Shipping Detail
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- tabs content -->
                                    <div class="col-md-9 col-sm-9 nopadding-left">
                                        <div class="tab-content">
                                            <div class="tab-pane" id="tab_a">
                                                <label class="textarea">
                                                    <textarea placeholder="Additional info" rows="3" name="comments"
                                                              id="comments"></textarea>
                                                </label>
                                            </div>

                                            <div class="tab-pane" id="tab_b">
                                                <h4>Payment Details</h4>


                                                <div class="row">
                                                    <label class="label col col-md-2">$1000x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment" type="currency"
                                                                   id="payment1000"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH1000"/>
                                                            = <span class="payment" id="paymentTotal1000">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$500x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH500"/>
                                                            <input class="payment" type="currency" id="payment500"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            =<span class="payment" id="paymentTotal500">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$100x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH100"/>
                                                            <input class="payment" type="currency" id="payment100"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">

                                                            =<span class="payment" id="paymentTotal100">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$50x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH50"/>
                                                            <input class="payment" type="currency" id="payment50"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            =<span class="payment" id="paymentTotal50">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$10x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH10"/>
                                                            <input class="payment" type="currency" id="payment10"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            =<span id="paymentTotal10">0</span>
                                                        </label>

                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">TOTAL</label>

                                                    <div class="col col-md-4">
                                                        <label class="input">
                                                            <input class="payment" type="currency"
                                                                   id="paymentTotal"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-2">
                                                        <label class="input">
                                                            <button class="btn btn-default btn-sm" type="button"
                                                                    id="applyPayment">Apply
                                                            </button>
                                                        </label>
                                                    </div>
                                                </div>


                                            </div>

                                            <div class="tab-pane active" id="tab_c">
                                                <label class="textarea">
                                                    <textarea placeholder="Shipping Address" rows="3"
                                                              name="shippingAddress"></textarea>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </form>
                            <!-- /shipping -->
                        </div>

                        <div class="col-md-5 col-sm-5">

                            <!-- cart totals -->
                            <div class="sky-form boxed cartContent">
                                <header class="styleColor">Order Totals</header>
                                <form class="sky-form boxed cartContent" method="post" action="#"
                                      id="order-summary-info-form">
                                    <fieldset>

                                        <section class="clearfix ">
                                            <span class="pull-right fsize16">
                                                <label class="input">
                                                    <input readonly="" type="currency" placeholder="Subtotal"
                                                           name="orderSubTotalAmount"
                                                           id="orderSubTotalAmount" value="0" data-number-to-fixed="2"
                                                           class="form-control currency"/>
                                                </label>
                                            </span>
                                            <span class="bold">Subtotal</span>
                                        </section>

                                        <section class="clearfix ">
                                    <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Shipping" name="orderShippingAmount"
                                                   id="orderShippingAmount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>
                                        </label>
                                    </span>
                                            <span class="bold">Shipping</span>
                                        </section>

                                        <section class="clearfix ">

                                    <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Discount" name="orderDiscount"
                                                   id="orderDiscount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Discount</span>
                                        </section>

                                        <div class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input readonly="" type="currency" placeholder="Order Total" name="totalOrderAmount"
                                                   id="totalOrderAmount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">ORDER TOTAL</span>
                                        </div>

                                        <section class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Payment Amount" name="orderPayment"
                                                   value="0" id="orderPayment" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Payments</span>
                                        </section>

                                        <section class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" readonly="" placeholder="Balance Amount"
                                                   name="orderDueAmount"
                                                   id="orderDueAmount" value="0" data-number-to-fixed="2"
                                                   data-number-stepfactor="100" class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Balance Due</span>
                                        </section>


                                    </fieldset>
                                </form>
                            </div>
                            <!-- /cart totals -->

                        </div>

                    </div>


                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="save-order-button" class="btn btn-primary">Save</button>
                </div>
                <!-- /modal footer -->

            </div>
        </div>
    </div>
</itemReceiptBlock>
<billBlock id="purchaseBillBlock" th:fragment="purchaseBillBlock">
    <div id="billBlock" class="modal fade bs-large-modal-lg" keyboard="false" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Bill</h4>
                </div>
                <!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">

                    <form class="ui-front" action="#" method="post" id="order-customer-info-form">
                        <input type="hidden" id="orderId" name="orderId"/>
                        <input type="hidden" name="customerId" id="customerId"/>
                        <input type="hidden" name="orderType" id="orderType" th:value="${T(com.chandra.pos.order.dao.entity.OrderType).BL}"/>
                        <input  type="hidden" placeholder="Order Total" name="totalOrderAmount"    id="totalOrderAmount" />

                        <div class="row tabs nomargin-top">

                            <div class="col-sm-5" id="customerinfo">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Supplier here.."
                                               id="search-customer"
                                               class="form-control search-customer"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </span>
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-3 " id="order-customer-info">
                                <span type="text" id="customer-companyName"/> <span
                                    class="glyphicon glyphicon-pencil order-customer-info-edit" id="order-customer-info-edit"></span><br/>
                                <span type="text" id="customer-name"/><br/>
                                <span type="text" id="customer-address"/><br/>
                                <span type="text" id="customer-mobileNumber"/>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div id="orderDateDiv" class="input-group date datetimepicker">
                                        <input type="text" placeholder="Order Date" id="orderDate" name="orderDate" th:value="${applicationDate}"
                                               class="form-control datepicker"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="row margin10">
                        <form class="ui-front " action="#" method="post">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Item here.." id="search-products"
                                               class="form-control search-products "/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>


                    <div class="row margin10" id="bill-items-block">
                        <table id="orderItemGrid" class="orderItemGrid"></table>
                        <div id="orderItemGridPager"></div>
                    </div>


                    <div class="row margin-top10">

                        <div class="col-md-7 col-sm-7">
                            <!-- shipping -->

                            <!-- /shipping -->
                        </div>

                        <div class="col-md-5 col-sm-5">

                            <!-- cart totals -->
                            <div class="sky-form boxed cartContent">
                                <header class="styleColor">Order Totals</header>
                                <form class="sky-form boxed cartContent" method="post" action="#"
                                      id="order-summary-info-form">
                                    <fieldset>

                                        <div class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input readonly="" type="currency" placeholder="Order Total" name="totalOrderAmount1"
                                                   id="totalOrderAmount1" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">ORDER TOTAL</span>
                                        </div>


                                    </fieldset>
                                </form>
                            </div>
                            <!-- /cart totals -->

                        </div>

                    </div>


                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="save-order-button" class="btn btn-primary">Save</button>
                </div>
                <!-- /modal footer -->

            </div>
        </div>
    </div>
</billBlock>
<purchaseOrderBlock id="purchaseOrderBlock" th:fragment="purchaseOrderBlock">
    <div id="purchaseOrderBlock" class="modal fade bs-large-modal-lg" keyboard="false" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Purchase Order</h4>
                </div>
                <!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">

                    <form class="ui-front" action="#" method="post" id="order-customer-info-form">
                        <input type="hidden" id="orderId" name="orderId"/>
                        <input type="hidden" name="customerId" id="customerId"/>
                        <input type="hidden" name="orderType" id="orderType" th:value="${T(com.chandra.pos.order.dao.entity.OrderType).PO}"/>
                        <input  type="hidden" placeholder="Order Total" name="totalOrderAmount"    id="totalOrderAmount" />

                        <div class="row tabs nomargin-top">

                            <div class="col-sm-5" id="customerinfo">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Customer here.."
                                               id="search-customer"
                                               class="form-control search-customer"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </span>
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-3 " id="order-customer-info">
                                <span type="text" id="customer-companyName"/> <span
                                    class="glyphicon glyphicon-pencil order-customer-info-edit" id="order-customer-info-edit"></span><br/>
                                <span type="text" id="customer-name"/><br/>
                                <span type="text" id="customer-address"/><br/>
                                <span type="text" id="customer-mobileNumber"/>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div id="orderDateDiv" class="input-group date datetimepicker">
                                        <input type="text" placeholder="Order Date" id="orderDate" name="orderDate" th:value="${applicationDate}"
                                               class="form-control datepicker"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="row margin10">
                        <form class="ui-front " action="#" method="post">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Item here.." id="search-products"
                                               class="form-control search-products"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>


                    <div class="row margin10" id="ourchase-order-items-block">
                        <table id="orderItemGrid" class="orderItemGrid"></table>
                        <div id="orderItemGridPager"></div>
                    </div>


                    <div class="row margin-top10">

                        <div class="col-md-7 col-sm-7">
                            <!-- shipping -->

                            <!-- /shipping -->
                        </div>

                        <div class="col-md-5 col-sm-5">

                            <!-- cart totals -->
                            <div class="sky-form boxed cartContent">
                                <header class="styleColor">Order Totals</header>
                                <form class="sky-form boxed cartContent" method="post" action="#"
                                      id="order-summary-info-form">
                                    <fieldset>

                                        <div class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input readonly="" type="currency" placeholder="Order Total" name="totalOrderAmount1"
                                                   id="totalOrderAmount1" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">ORDER TOTAL</span>
                                        </div>


                                    </fieldset>
                                </form>
                            </div>
                            <!-- /cart totals -->

                        </div>

                    </div>


                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="save-order-button" class="btn btn-primary">Save</button>
                </div>
                <!-- /modal footer -->

            </div>
        </div>
    </div>
</purchaseOrderBlock>
<saleOrderBlock id="saleOrderBlock" th:fragment="saleOrderBlock">
    <div id="saleOrderBlock" class="modal fade bs-large-modal-lg" keyboard="false" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Sales Order</h4>
                </div>
                <!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">

                    <form class="ui-front" action="#" method="post" id="order-customer-info-form">
                        <input type="hidden" id="orderId" name="orderId"/>
                        <input type="hidden" name="customerId" id="customerId"/>
                        <input type="hidden" name="orderType" id="orderType" th:value="${T(com.chandra.pos.order.dao.entity.OrderType).SO}"/>
                        <div class="row tabs nomargin-top">

                            <div class="col-sm-5" id="customerinfo">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Customer here.."
                                               id="search-customer"
                                               class="form-control search-customer"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </span>
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-3 " id="order-customer-info">
                                <span type="text" id="customer-companyName"/> <span
                                    class="glyphicon glyphicon-pencil order-customer-info-edit" id="order-customer-info-edit"></span><br/>
                                <span type="text" id="customer-name"/><br/>
                                <span type="text" id="customer-address"/><br/>
                                <span type="text" id="customer-mobileNumber"/>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div id="orderDateDiv" class="input-group date datetimepicker">
                                        <input type="text" placeholder="Order Date" id="orderDate" name="orderDate" th:value="${applicationDate}"
                                               class="form-control datepicker"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="row margin10">
                        <form class="ui-front " action="#" method="post">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Item here.." id="search-products"
                                               class="form-control search-products "/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>


                    <div class="row margin10" id="sales-order-items-block">
                        <table id="orderItemGrid" class="orderItemGrid"></table>
                        <div id="orderItemGridPager"></div>
                    </div>


                    <div class="row margin-top10">

                        <div class="col-md-7 col-sm-7">

                        </div>

                        <div class="col-md-5 col-sm-5">

                            <!-- cart totals -->
                            <div class="sky-form boxed cartContent">
                                <header class="styleColor">Order Totals</header>
                                <form class="sky-form boxed cartContent" method="post" action="#"
                                      id="order-summary-info-form">
                                    <fieldset>

                                        <section class="clearfix ">
                                            <span class="pull-right fsize16">
                                                <label class="input">
                                                    <input readonly="" type="currency" placeholder="Subtotal"
                                                           name="orderSubTotalAmount"
                                                           id="orderSubTotalAmount" value="0" data-number-to-fixed="2"
                                                           class="form-control currency"/>
                                                </label>
                                            </span>
                                            <span class="bold">Subtotal</span>
                                        </section>

                                        <section class="clearfix ">
                                    <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Shipping" name="orderShippingAmount"
                                                   id="orderShippingAmount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>
                                        </label>
                                    </span>
                                            <span class="bold">Shipping</span>
                                        </section>

                                        <section class="clearfix ">

                                    <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Discount" name="orderDiscount"
                                                   id="orderDiscount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Discount</span>
                                        </section>

                                        <div class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input readonly="" type="currency" placeholder="Order Total" name="totalOrderAmount"
                                                   id="totalOrderAmount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">ORDER TOTAL</span>
                                        </div>

                                        <section class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Payment Amount" name="orderPayment"
                                                   value="0" id="orderPayment" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Payments</span>
                                        </section>

                                        <section class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" readonly="" placeholder="Balance Amount"
                                                   name="orderDueAmount"
                                                   id="orderDueAmount" value="0" data-number-to-fixed="2"
                                                   data-number-stepfactor="100" class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Balance Due</span>
                                        </section>


                                    </fieldset>
                                </form>
                            </div>
                            <!-- /cart totals -->

                        </div>

                    </div>


                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="save-order-button" class="btn btn-primary">Save</button>
                </div>
                <!-- /modal footer -->

            </div>
        </div>
    </div>
</saleOrderBlock>
<invoiceBlock id="invoiceBlock" th:fragment="invoiceBlock">
    <div id="invoiceBlock" class="modal fade bs-large-modal-lg" keyboard="false" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Invoice</h4>
                </div>
                <!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">

                    <form class="ui-front" action="#" method="post" id="invoice-customer-info-form">
                        <input type="hidden" id="orderId" name="orderId"/>
                        <input type="hidden" name="customerId" id="customerId"/>
                        <input type="hidden" name="orderType" id="orderType" th:value="${T(com.chandra.pos.order.dao.entity.OrderType).IN}"/>
                        <div class="row tabs nomargin-top">

                            <div class="col-sm-5" id="customerinfo">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text" placeholder="Search Customer here.." id="search-customer"   class="form-control search-customer "/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-3 " id="order-customer-info" >
                               <address>
                                <span type="text" id="customer-companyName"/><br/>
                                <span type="text" id="customer-name"/><br/>
                                <span type="text" id="customer-address"/><br/>
                                <span type="text" id="customer-mobileNumber"/>
                                 <span
                                           class="glyphicon glyphicon-pencil order-customer-info-edit" id="order-customer-info-edit"></span>
                               </address>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div id="orderDateDiv" class="input-group date datetimepicker">
                                        <input type="text" placeholder="Order Date" id="orderDate" name="orderDate" th:value="${applicationDate}"
                                               class="form-control datepicker"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="row margin10">
                        <form class="ui-front " action="#" method="post">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text" placeholder="Search Item here.." id="search-products"
                                               class="form-control search-products"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>


                    <div class="row margin10" id="invoice-items-block">
                        <table id="orderItemGrid" class="orderItemGrid"></table>
                        <div id="orderItemGridPager"></div>
                    </div>


                    <div class="row margin-top10">

                        <div class="col-md-7 col-sm-7">
                            <!-- shipping -->
                            <form class="sky-form boxed cartContent" method="post" action="#"
                                  id="order-shipping-info-form">
                                <header class="styleColor">Additional Info</header>


                                <div class="row tabs nomargin-top">

                                    <!-- tabs -->
                                    <div class="col-md-3 col-sm-3 nopadding-right">
                                        <ul class="nav nav-tabs nav-stacked">
                                            <li class="">
                                                <a data-toggle="tab" href="#tab_a" aria-expanded="false">
                                                    Note
                                                </a>
                                            </li>
                                            <li class="">
                                                <a data-toggle="tab" href="#tab_b" aria-expanded="false">
                                                    Payment Details
                                                </a>
                                            </li>
                                            <li class="active">
                                                <a data-toggle="tab" href="#tab_c" aria-expanded="true">
                                                    Shipping Detail
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- tabs content -->
                                    <div class="col-md-9 col-sm-9 nopadding-left">
                                        <div class="tab-content">
                                            <div class="tab-pane" id="tab_a">
                                                <label class="textarea">
                                                    <textarea placeholder="Additional info" rows="3" name="comments"
                                                              id="comments"></textarea>
                                                </label>
                                            </div>

                                            <div class="tab-pane" id="tab_b">
                                                <h4>Payment Details</h4>


                                                <div class="row">
                                                    <label class="label col col-md-2">$1000x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment" type="currency"
                                                                   id="payment1000"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH1000"/>
                                                            = <span class="payment" id="paymentTotal1000">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$500x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH500"/>
                                                            <input class="payment" type="currency" id="payment500"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            =<span class="payment" id="paymentTotal500">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$100x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH100"/>
                                                            <input class="payment" type="currency" id="payment100"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">

                                                            =<span class="payment" id="paymentTotal100">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$50x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH50"/>
                                                            <input class="payment" type="currency" id="payment50"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            =<span class="payment" id="paymentTotal50">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$10x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH10"/>
                                                            <input class="payment" type="currency" id="payment10"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            =<span id="paymentTotal10">0</span>
                                                        </label>

                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">TOTAL</label>

                                                    <div class="col col-md-4">
                                                        <label class="input">
                                                            <input class="payment" type="currency"
                                                                   id="paymentTotal"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-2">
                                                        <label class="input">
                                                            <button class="btn btn-default btn-sm" type="button"
                                                                    id="applyPayment">Apply
                                                            </button>
                                                        </label>
                                                    </div>
                                                </div>


                                            </div>

                                            <div class="tab-pane active" id="tab_c">
                                                <label class="textarea">
                                                    <textarea placeholder="Shipping Address" rows="3"
                                                              name="shippingAddress"></textarea>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </form>
                            <!-- /shipping -->
                        </div>

                        <div class="col-md-5 col-sm-5">

                                <form class="sky-form boxed cartContent" method="post" action="#"       id="order-summary-info-form">
                                    <fieldset>

                                        <section class="clearfix ">
                                            <span class="pull-right fsize16">
                                                <label class="input">
                                                    <input readonly="" type="currency" placeholder="Subtotal"
                                                           name="orderSubTotalAmount"
                                                           id="orderSubTotalAmount" value="0" data-number-to-fixed="2"
                                                           class="form-control currency"/>
                                                </label>
                                            </span>
                                            <span class="bold">Subtotal</span>
                                        </section>

                                        <section class="clearfix ">
                                    <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Shipping" name="orderShippingAmount"
                                                   id="orderShippingAmount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>
                                        </label>
                                    </span>
                                            <span class="bold">Shipping</span>
                                        </section>

                                        <section class="clearfix ">

                                    <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Discount" name="orderDiscount"
                                                   id="orderDiscount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Discount</span>
                                        </section>

                                        <div class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input readonly="" type="currency" placeholder="Order Total" name="totalOrderAmount"
                                                   id="totalOrderAmount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">ORDER TOTAL</span>
                                        </div>

                                        <section class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Payment Amount" name="orderPayment"
                                                   value="0" id="orderPayment" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Payments</span>
                                        </section>

                                        <section class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" readonly="" placeholder="Balance Amount"
                                                   name="orderDueAmount"
                                                   id="orderDueAmount" value="0" data-number-to-fixed="2"
                                                   data-number-stepfactor="100" class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Balance Due</span>
                                        </section>


                                    </fieldset>
                                </form>


                        </div>

                    </div>


                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="save-order-button" class="btn btn-primary">Save</button>
                </div>
                <!-- /modal footer -->

            </div>
        </div>
    </div>
</invoiceBlock>
<salesReceiptBlock id="SalesReceiptBlock" th:fragment="SalesReceiptBlock">
    <div id="salesReceiptBlock" class="modal fade bs-large-modal-lg" keyboard="false" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header"><!-- modal header -->
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Sales Receipt</h4>
                </div>
                <!-- /modal header -->

                <!-- modal body -->
                <div class="modal-body">

                    <form class="ui-front" action="#" method="post" id="order-customer-info-form">
                        <input type="hidden" id="orderId" name="orderId"/>
                        <input type="hidden" name="customerId" id="customerId"/>
                        <input type="hidden" name="orderType" id="orderType" th:value="${T(com.chandra.pos.order.dao.entity.OrderType).SR}"/>
                        <div class="row tabs nomargin-top">

                            <div class="col-sm-5" id="customerinfo">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Customer here.."
                                               id="search-customer"
                                               class="form-control search-customer"/>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </span>
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-3 " id="order-customer-info">
                                <span type="text" id="customer-companyName"/> <span
                                    class="glyphicon glyphicon-pencil order-customer-info-edit" id="order-customer-info-edit"></span><br/>
                                <span type="text" id="customer-name"/><br/>
                                <span type="text" id="customer-address"/><br/>
                                <span type="text" id="customer-mobileNumber"/>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div id="orderDateDiv" class="input-group date datetimepicker">
                                        <input type="text" placeholder="Order Date" id="orderDate" name="orderDate" th:value="${applicationDate}"
                                               class="form-control datepicker"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>

                    <div class="row margin10">
                        <form class="ui-front " action="#" method="post">
                            <div class="col-sm-8">
                                <div class="form-group">
                                    <div class="input-group date">
                                        <input type="text" placeholder="Search Item here.." id="search-products"
                                               class="form-control search-products"/>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </div>


                    <div class="row margin10" id="sales-receipt-items-block">
                        <table id="orderItemGrid" class="orderItemGrid"></table>
                        <div id="orderItemGridPager"></div>
                    </div>


                    <div class="row margin-top10">

                        <div class="col-md-7 col-sm-7">
                            <!-- shipping -->
                            <form class="sky-form boxed cartContent" method="post" action="#"
                                  id="order-shipping-info-form">
                                <header class="styleColor">Additional Info</header>


                                <div class="row tabs nomargin-top">

                                    <!-- tabs -->
                                    <div class="col-md-3 col-sm-3 nopadding-right">
                                        <ul class="nav nav-tabs nav-stacked">
                                            <li class="">
                                                <a data-toggle="tab" href="#tab_a" aria-expanded="false">
                                                    Note
                                                </a>
                                            </li>
                                            <li class="">
                                                <a data-toggle="tab" href="#tab_b" aria-expanded="false">
                                                    Payment Details
                                                </a>
                                            </li>
                                            <li class="active">
                                                <a data-toggle="tab" href="#tab_c" aria-expanded="true">
                                                    Shipping Detail
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- tabs content -->
                                    <div class="col-md-9 col-sm-9 nopadding-left">
                                        <div class="tab-content">
                                            <div class="tab-pane" id="tab_a">
                                                <label class="textarea">
                                                    <textarea placeholder="Additional info" rows="3" name="comments"
                                                              id="comments"></textarea>
                                                </label>
                                            </div>

                                            <div class="tab-pane" id="tab_b">
                                                <h4>Payment Details</h4>


                                                <div class="row">
                                                    <label class="label col col-md-2">$1000x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment" type="currency"
                                                                   id="payment1000"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH1000"/>
                                                            = <span class="payment" id="paymentTotal1000">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$500x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH500"/>
                                                            <input class="payment" type="currency" id="payment500"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            =<span class="payment" id="paymentTotal500">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$100x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH100"/>
                                                            <input class="payment" type="currency" id="payment100"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">

                                                            =<span class="payment" id="paymentTotal100">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$50x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH50"/>
                                                            <input class="payment" type="currency" id="payment50"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            =<span class="payment" id="paymentTotal50">0</span>
                                                        </label>
                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">$10x</label>

                                                    <div class="col col-md-3">
                                                        <label class="input">
                                                            <input class="payment hide" type="currency"
                                                                   id="paymentH10"/>
                                                            <input class="payment" type="currency" id="payment10"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-6">
                                                        <label class="input">
                                                            =<span id="paymentTotal10">0</span>
                                                        </label>

                                                    </div>
                                                </div>


                                                <div class="row">
                                                    <label class="label col col-md-2">TOTAL</label>

                                                    <div class="col col-md-4">
                                                        <label class="input">
                                                            <input class="payment" type="currency"
                                                                   id="paymentTotal"/>
                                                        </label>
                                                    </div>
                                                    <div class="col col-md-2">
                                                        <label class="input">
                                                            <button class="btn btn-default btn-sm" type="button"
                                                                    id="applyPayment">Apply
                                                            </button>
                                                        </label>
                                                    </div>
                                                </div>


                                            </div>

                                            <div class="tab-pane active" id="tab_c">
                                                <label class="textarea">
                                                    <textarea placeholder="Shipping Address" rows="3"
                                                              name="shippingAddress"></textarea>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </form>
                            <!-- /shipping -->
                        </div>

                        <div class="col-md-5 col-sm-5">

                            <!-- cart totals -->
                            <div class="sky-form boxed cartContent">
                                <header class="styleColor">Order Totals</header>
                                <form class="sky-form boxed cartContent" method="post" action="#"
                                      id="order-summary-info-form">
                                    <fieldset>

                                        <section class="clearfix ">
                                            <span class="pull-right fsize16">
                                                <label class="input">
                                                    <input readonly="" type="currency" placeholder="Subtotal"
                                                           name="orderSubTotalAmount"
                                                           id="orderSubTotalAmount" value="0" data-number-to-fixed="2"
                                                           class="form-control currency"/>
                                                </label>
                                            </span>
                                            <span class="bold">Subtotal</span>
                                        </section>

                                        <section class="clearfix ">
                                    <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Shipping" name="orderShippingAmount"
                                                   id="orderShippingAmount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>
                                        </label>
                                    </span>
                                            <span class="bold">Shipping</span>
                                        </section>

                                        <section class="clearfix ">

                                    <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Discount" name="orderDiscount"
                                                   id="orderDiscount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Discount</span>
                                        </section>

                                        <div class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input readonly="" type="currency" placeholder="Order Total" name="totalOrderAmount"
                                                   id="totalOrderAmount" value="0" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">ORDER TOTAL</span>
                                        </div>

                                        <section class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" placeholder="Payment Amount" name="orderPayment"
                                                   value="0" id="orderPayment" data-number-to-fixed="2"
                                                   class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Payments</span>
                                        </section>

                                        <section class="clearfix ">
                                         <span class="pull-right fsize16">
                                        <label class="input">
                                            <input type="currency" readonly="" placeholder="Balance Amount"
                                                   name="orderDueAmount"
                                                   id="orderDueAmount" value="0" data-number-to-fixed="2"
                                                   data-number-stepfactor="100" class="form-control currency"/>

                                        </label>
                                    </span>
                                            <span class="bold">Balance Due</span>
                                        </section>


                                    </fieldset>
                                </form>
                            </div>
                            <!-- /cart totals -->

                        </div>

                    </div>


                </div>
                <!-- /modal body -->

                <div class="modal-footer"><!-- modal footer -->
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="save-order-button" class="btn btn-primary">Save</button>
                </div>
                <!-- /modal footer -->

            </div>
        </div>
    </div>
</salesReceiptBlock>